import * as THREE from 'three';
import { CSS2DRenderer, CSS2DObject  } from "three/examples/jsm/renderers/CSS2DRenderer.js";
import { scene ,camera  } from "./scene.js";
import { picks , productData , hot_cube } from "./product.js";
import { config } from './config.js';
import { iconGroup } from './icon.js';
import { productSceneLoad } from './productScene.js';
import { is_mobile } from "../libs/common.js";

import  emitter from "../../mitt/eventbus.js";


var productTag  = {};
setTimeout(function(){
    emitter.emit("getTagDom",function(productTagDom){
        productTag = new CSS2DObject(productTagDom);
        scene.add(productTag);
        productTag.position.set(0,0,0);
    })
},100)


var chooseStatck = null;
var chooseMesh   = null;

var preChooseMesh   = null;
var preChooseMeshName   = null;
var preChooseStatck = null;

var selectedColor = new THREE.Color(config.stack.selectedColor);
var pickMeshArr = [].concat(picks,iconGroup.children);



// move事件，检测单个垛位信息 垛位信息如果被选中出现选中效果的话，就是修改垛位盒子的颜色即可
function chooseMove(event)
{

    // 正在查看垛位详细信息
    if(config.isProductScene) return;
    
    if(config.cameraTargetStack.length == 0) return;
    if (chooseMesh && chooseMesh.isInstancedMesh) {
        chooseMesh.parent.material.color.set(0x00ffff);
        productTag.element.style.visibility = 'hidden';//隐藏标签
        hot_cube.visible = false;
    }
    var Sx = event.clientX; //鼠标单击位置横坐标
    var Sy = event.clientY; //鼠标单击位置纵坐标
    //屏幕坐标转WebGL标准设备坐标
    var x = (Sx / window.innerWidth) * 2 - 1; //WebGL标准设备横坐标
    var y = -(Sy / window.innerHeight) * 2 + 1; //WebGL标准设备纵坐标

    var raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
    var intersects = raycaster.intersectObjects(config.cameraTargetStack,true);
    if (intersects.length > 0) {
        chooseMesh     = intersects[0].object;//这里就是需要操作的网格模型了
        var instanceId = intersects[0].instanceId;//这里的instanceId就是该实例的索引，对应我们之前初始化时的index
        var point      = intersects[0].point;
        if (chooseMesh.isInstancedMesh && instanceId>= 0) {
            var statckName = chooseMesh.name;
            var cName = chooseMesh.cName;
            var chooseStatck = getUnitByName(cName,statckName,window.stackList);
            productTag.position.copy(point);
            productTag.element.style.visibility = "visible";;
         
            emitter.emit("ShowTag",chooseStatck);
            if(chooseMesh.parent)
            {
                // 也可以做成动画效果
                chooseMesh.parent.material.color.set(0xffcccc);

                var worldPosition = new THREE.Vector3();
                chooseMesh.parent.getWorldPosition(worldPosition)
                hot_cube.position.copy(worldPosition);
                hot_cube.visible = true;

            }
        }
    }
}


// 拾取 图标  和  垛位
function chooseClick(event) { 
    if(config.isProductScene){
        //  正在查看垛位详细信息
        return;
    } ;


    var Sx = event.clientX; //鼠标单击位置横坐标
    var Sy = event.clientY; //鼠标单击位置纵坐标
    //屏幕坐标转WebGL标准设备坐标
    var x = (Sx / window.innerWidth) * 2 - 1; //WebGL标准设备横坐标
    var y = -(Sy / window.innerHeight) * 2 + 1; //WebGL标准设备纵坐标

    var raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
    var _picks = [].concat(config.cameraTargetStack,iconGroup.children);
    var intersects = raycaster.intersectObjects(_picks,true);

    if (intersects.length > 0) {
     
        chooseMesh     = intersects[0].object;//这里就是需要操作的网格模型了
        if(chooseMesh.name.indexOf("posIcon_") >= 0)
        {
            // layer.msg("正在调取"+chooseMesh.name+"摄像资料···");
            var parkName = chooseMesh.name;
            var videoUrl = chooseMesh.videoUrl;

            var videoInfo = {
                parkName : parkName,
                videoUrl : videoUrl
            }
            emitter.emit("showVideo",videoInfo);
            return;
        };

        if (chooseMesh) {
            chooseMesh.parent.material.color.set(0x00ffff);
            productTag.element.style.visibility = 'hidden';//隐藏标签
            hot_cube.visible = false;
        }

        if(is_mobile()){
            var point      = intersects[0].point;
            productTag.position.copy(point);
            productTag.element.style.visibility = "visible";

            var statckName = chooseMesh.name;
            var cName = chooseMesh.cName;
            var chooseStatck = getUnitByName(cName,statckName,window.stackList);
            emitter.emit("ShowTag",chooseStatck);

            if(chooseMesh.parent)
            {
                // 也可以做成动画效果
                chooseMesh.parent.material.color.set(0xffcccc);

                var worldPosition = new THREE.Vector3();
                chooseMesh.parent.getWorldPosition(worldPosition)
                hot_cube.position.copy(worldPosition);
                hot_cube.visible = true;

            }


        }else{
            // 垛位查询信息
            var statckName = chooseMesh.name;
            var cName = chooseMesh.cName;
            var chooseStatck = getUnitByName(cName,statckName,window.stackList);

            // 弹出垛位信息 展示垛位详细信息 及 货物信息
            emitter.emit("productSceneLoad",chooseStatck);

            config.isProductScene = true;
           
        }
       
        
    }
}


function getStackByName(cName,instanceId,productData)
{
    for (let index = 0; index < productData.length; index++) {
        const element = productData[index];
        if(element.name == cName)
        {   
            return element.statck[instanceId];
            break;
        }
        
    }
}

function getUnitByName(cName,stackCode,productData)
{

    for (let index = 0; index < productData.length; index++) {
        const element = productData[index];
        const statcks = element.statcks;
        if(cName == element.cNum)
        {
            for (let n = 0; n < statcks.length; n++) {
                const statck = statcks[n];
                if(statck.stackCode == stackCode){
                    return statck;
                }
            }
        }
    }
}




// addEventListener('click', chooseClick); 
// addEventListener('mousemove', chooseMove); 


// // 防止误点击
// document.addEventListener('pointerdown', pointerdown, false);
// document.addEventListener('pointerup', pointerup, false);

var pointerPos = {};
var FaultTolerancevalue = 4;
function pointerdown(e)
{
    pointerPos = e;
}
function pointerup(e)
{
    if(Math.abs(e.clientX - pointerPos.clientX) <= FaultTolerancevalue && Math.abs(e.clientY - pointerPos.clientY) <= FaultTolerancevalue){
        chooseClick(e);
    }
}


export {
    chooseStatck,
    pointerdown,
    pointerup,
    chooseMove,
}